import { ElButton, ElInput, ElDatePicker } from 'element-plus'
import xsInput from '@/components/material/xs-input'
import { ref } from 'vue'

const createEditorConfig = () => {
  const componentMap = ref({})

  const componentList = ref([])

  const register = (components) => {
    componentList.value.push(components)
    componentMap.value[components.key] = components
  }

  return {
    register,
    componentMap,
    componentList,
  }
}

const registerConfig = createEditorConfig()

export default registerConfig

// 创建一堆工厂函数
const createInputProp = (lable) => ({ type: 'input', lable })
const createColorProp = (lable) => ({ type: 'color', lable })
const createSelectProp = (lable, options) => ({
  type: 'select',
  lable,
  options,
})

registerConfig.register({
  lable: 'button',
  preview: () => <ElButton type="primary">预览按钮</ElButton>,
  render: (block, size) => {
    return (
      <ElButton
        style={{ width: size.width + 'px', height: size.height + 'px' }}
        size={block.props.size}
        type={block.props.type}>
        {block.props.text || '默认按钮'}
      </ElButton>
    )
  },
  key: 'button',
  props: {
    text: createInputProp('按钮文本'),
    type: createSelectProp('按钮类型', [
      { label: 'primary', value: 'primary' },
      { label: 'success', value: 'success' },
      { label: 'warning', value: 'warning' },
      { label: 'danger', value: 'danger' },
      { label: 'info', value: 'info' },
      { lable: 'default', value: 'default' },
    ]),
    size: createSelectProp('按钮大小', [
      { label: 'default', value: 'default' },
      { label: 'small', value: 'small' },
      { label: 'large', value: 'large' },
    ]),
  },
  resize: {
    width: true,
    height: true,
  },
})

registerConfig.register({
  lable: 'input',
  preview: () => <xsInput placeholder="预览输入框" />,
  render: (block, size, model) => {
    console.log('model', model.default)
    return (
      <xsInput
        {...model.default}
        style={{ width: size.width + 'px', height: size.height + 'px' }}
        placeholder={block.props.text || '默认输入框'}
      />
    )
  },
  key: 'input',
  props: {
    text: createInputProp('提示内容'),
  },
  resize: {
    width: true,
    height: false,
  },
  model: {
    default: '绑定属性',
  },
})

registerConfig.register({
  lable: 'text',
  preview: () => <div>预览文本</div>,
  render: (block, size) => (
    <div
      style={{
        color: block.props.color,
        fontSize: block.props.size,
        width: size.width + 'px',
        height: size.height + 'px',
      }}>
      {block.props.text || '默认文本'}
    </div>
  ),
  key: 'text',
  props: {
    text: createInputProp('文本内容'),
    color: createColorProp('文本颜色'),
    size: createSelectProp('文本大小', [
      { label: '14px', value: '14px' },
      { label: '16px', value: '16px' },
      { label: '18px', value: '18px' },
      { lable: '20px', value: '20px' },
      { label: '22px', value: '22px' },
      { label: '24px', value: '24px' },
      { label: '26px', value: '26px' },
      { label: '28px', value: '28px' },
      { label: '30px', value: '30px' },
    ]),
  },
  resize: {
    width: true,
    height: true,
  },
})

registerConfig.register({
  lable: 'date',
  preview: () => <ElDatePicker type="date" placeholder="预览日期" />,
  render: () => <ElDatePicker type="date" placeholder="渲染日期" />,
  key: 'date',
  resize: {},
})
